@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-title">
            <h5>换货处理</h5>
        </div>
        <div class="ibox-content">

            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="javascript:;" class="btn-tab">全部</a></li>
                    <li class=""><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="2">待发货</a></li>
                    <li class=""><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="4">已完成</a></li>
                </ul>
                <div class="tab-content">
                    <div id="tab-3" class="tab-pane active">
                        <div class="panel-body">
                            <form role="form" class="form-inline">
                            <div class="form-group">
                                <input name="box_id" type="number" placeholder="盒子id"  class="form-control">
                            </div>
                            <button class="btn btn-primary btn-sm" type="button" id="buttonData">搜索</button>
                        </form>
                        <div class="hr-line-dashed"></div>
                            <table id="tblDataList" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>盒子id</th>
                                        <th>会员编号</th>
                                        <th>款号</th>
                                        <th>新需求</th>
                                        <th>换货原因</th>
                                        <th>衣服照片</th>
                                        <th>状态</th>
                                        <th>收货人</th>
                                        <th>联系方式</th>
                                        <th>收货地址</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <div class="text-center pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tplDataListTr">
    @{{each rows.data as v}}
        <tr data-id="@{{v.id}}"  data-status="@{{v.status}}"  data-type="@{{v.type}}">
            <td width="5%">@{{v.box_id}}</td>
            <td>@{{v.user.number}}</td>
            <td>@{{v.collocation.style_number}}</td>
            <td>@{{v.demand}}</td>
            <td>@{{v.reason}}</td>
            <td>
                <a href="javascript:;" class="retreat-photos" ><i class="fa fa-file-image-o" aria-hidden="true"></i></a>
            </td>
            <td>@{{v.statusName}}</td>
            <td>@{{if v.address}} @{{v.address .username}}@{{/if}}</td>
            <td>@{{if v.address}} @{{v.address.phone}}@{{/if}}</td>
            <td>@{{if v.address}} @{{v.address.province}}@{{v.address.city}}@{{v.address.area}}@{{v.address.address}}@{{/if}}</td>
            <td>
                    <a href="javascript:;" class="m-r-xs btn btn-primary btn-xs btn-send-info">
                         查看物流
                    </a>
                @{{if v.status ==1 || v.status ==2 }}
                    <a href="javascript:;" class="m-r-xs btn btn-primary btn-xs btn-send">
                        发货
                    </a>
                @{{/if}}
                @{{if v.status==4}}
                    <a href="javascript:;" class="m-r-xs btn btn-primary btn-xs btn-handle">
                         完成
                    </a>
                @{{/if}}
            </td>
        </tr>
    @{{/each}}
</script>




<script type="text/html" id="tplSend">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="formSend" class="form-horizontal" onsubmit="return false">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">发货信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">快递:</label>
                            <div class="col-sm-9">
                                <select class="form-control m-b" name="name" required>
                                    <option value="顺丰">顺丰</option>
                                    <option value="韵达">韵达</option>
                                    <option value="优速">优速</option>
                                    <option value="中通">中通</option>
                                    <option value="申通">申通</option>
                                    <option value="圆通">圆通</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">快递单号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="no" value="" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">预计签收时间</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="estimate_at" id="estimate_at" value="" required="">
                            </div>
                        </div>
                    <!--<div class="form-group">
                            <label class="col-sm-2 control-label">标题:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="title" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">款号:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="style_number" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">价格:</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" name="price" required min="0" onkeyup="clearNoNum(this)">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">件数:</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" name="p_number" required min="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">颜色:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="colour" required >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">尺码:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="size" required>
                            </div>
                        </div>
                        <div class="form-group item-pic">
                            <label class="col-sm-2 control-label">上传照片：</label>
                            <div class="col-sm-9">
                                <img src="/assets/images/upload-img.jpg" width="180px" id="imgList">
                                <input type="file" style="display: none" id="uploadfile">
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" class="form-control" value="@{{id}}" name="id" required="">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</script>
<script type="text/html" id="tplDataSendTr">
    <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">查看收货信息</h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td>快递:</td>
                                <td>@{{row.name}}</td>
                            </tr>
                            <tr>
                                <td>快递单号:</td>
                                <td>@{{row.no}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
</script>
@endsection

@section('pageheader')
@endsection
@section('pagescript')

    <script src="/assets/layDate/laydate.js"></script>
<script>
    $("#side-menu li[rel='retreat']").addClass("active")

    var filter = {page:1,type:1};
    $(function () {
        renderList();

        $('#buttonData').on('click',function(){
            filter.id = $("input[name='id']").val();
            filter.page = 1;
            renderList();
        });

        $("#tblDataList").on("click",".retreat-photos",function(){
            var id = $(this).parents('tr').eq(0).attr('data-id');
            $.get('/admin/goods/'+id+'/photos',function(data){
                layer.photos({
                    photos: data,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            }).fail(failure);

        })


        $('#tblDataList').on('click','.btn-send',function(){
            var id=  $(this).parents('tr').eq(0).attr('data-id');
            $("#modalDialog").html(template("tplSend", {'id':id})).modal("show");
            laydate.render({
                elem: '#estimate_at'
                ,format: 'yyyy-MM-dd'
            });
        });


        $('#tblDataList').on('click','.btn-send-info',function(){
            var id=  $(this).parents('tr').eq(0).attr('data-id');
            $.get('/admin/goods/'+id,function(data){
                $("#modalDialog").html(template("tplDataSendTr", data)).modal("show");
            }).fail(failure);
        });

        $('#modalDialog').on('click','.item-pic img',function(){
            $("input[type='file']").click();

            $("input[type='file']").change(function () {
                let files=$(this)[0].files[0];//获取files对象

                var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
                if (!rFilter.test(files.type)) {
                    msg('格式错误');
                    return;
                }
                layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                var formData = new FormData();
                formData.append("file",files);
                $.ajax({
                    url: "/admin/upload-img",
                    type: "post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $('.item-pic img').attr('src','/'+data).attr('url',data);
                        layer.closeAll();
                    },
                    error: function (data) {
                        layer.closeAll();
                        var str = typeof(data) == 'string' ? data : data.responseJSON;
                        layer.msg(str, {icon: 0});
                        return false;
                    }
                });
            });
        });


        //提交搭配
        $("#modalDialog").on('submit', '#formSend', function (e) {
            var param = new Array();
            formData = $('#formSend').serializeArray();
            var pic = $("#imgList").attr("url");
            formData.push({"name":"pic","value":pic});

            $.ajax({
                url: "/admin/goods/send",
                dataType: "json",
                type: "post",
                data: formData,
                success: function (data) {
                    layer.msg('提交成功');
                    renderList();
                },
                error: function (data) {
                    var str = typeof(data) == 'string' ? data : data.responseJSON;
                    layer.msg(str, {icon: 0});
                    return false;
                }
            });
        });


        $('.btn-tab').on('click',function(){
            $(this).parents('li').eq(0).addClass('active').siblings().removeClass('active');
            filter.status = $(this).attr('rel');//status==3 为banner
            filter.page = 1;
            renderList();
        });

        $("#tblDataList").on("click", ".pagination a", function() {
            filter.page = $(this).attr("rel");
            renderList();
        });
    })

    var renderList = function(){
        $("#tblDataList tbody").html('<tr><td colspan="11"><p class="ibox-loading-31">&nbsp;</p></td></tr>');
        $.get('/admin/goods/page-rows',filter,function(data){
            var pagination = data.rows;
            $("#tblDataList tbody").html(template("tplDataListTr", data));
            $(".pagination").html(page(pagination.last_page, pagination.total, pagination.current_page));
        }).fail(failure);
    };



</script>
@endsection
